(function($){
    $.widget('jQ.tooltip', {
        _create: function(){
            this._tooltipDiv = $('<div></div>')
                .addClass(
                    'jQ-tooltip-text ' +
                    'ui-widget ui-state-highlight ui-corner-all'
                )
                .hide().appendTo('body');
            
            this.element
                .addClass('jQ-tooltip-trigger')
                .bind(
                    'mouseenter.jQ-tooltip',
                    $.proxy(this._open, this)
                )
                .bind(
                    'mouseleave.jQ-tooltip',
                    $.proxy(this._close, this)
                )
        },
        
        options: {
            offsetX: 10,
            offsetY: 10,
            content: function() {
                return $(this).data('tooltip-text');
            }
        },
        
        _open: function(){
            if (!this.options.disabled){
                var elementOffset = this.element.offset();
                this._tooltipDiv.css({
                    left: elementOffset.left + this.options.offsetX,
                    top: elementOffset.top + this.element.height() + this.options.offsetY
                }).text(this.options.content.call(this.element[0]));
                this._tooltipDiv.show();
                this._trigger('open');
            }
        },
        
        _close: function(){
            this._tooltipDiv.hide();
            this._trigger('close');
        },
        
        destroy: function(){
            this._tooltipDiv.remove();
            this.element
                .remove('jQ-tooltip-trigger')
                .unbind('.jQ-tooltip');
            $.Widget.prototype.destroy.apply(this, arguments);
        }
    });
})(jQuery);